<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="van-cell" v-for="item in list" :key="item.id">
        <div class="flex">
          <router-link to="/detailPage">
            <div class="list">
              <img v-lazy="item.productimg" alt="" />
              <h3>{{ item.productname }}</h3>
              <span>￥{{ item.price }}</span>
            </div>
          </router-link>
        </div>
      </div>
    </van-pull-refresh>
  </div>
  <backTop></backTop>
  <p class="bottomTip">
    <van-icon name="gem-o" size="18" />&nbsp;已经到最底下了~
  </p>
  <p class="bottom">1</p>
</template>

<script setup>
import { getClassify } from "@/api/classifyList.js";

import { showToast } from "vant";

// 回到顶部
import backTop from "@/components/ZhiDing.vue";

import { ref } from "vue";

const isLoading = ref(false);

let list = ref([]);

// 获取数据
function getClassifyData() {
  getClassify("数码")
    .then((request) => {
      list.value = request.data.list;
    })
    .catch((error) => {
      console.log(error);
    });
}
getClassifyData();

function onRefresh() {
  isLoading.value = false;
  showToast("刷新成功");
  getClassifyData();
}
</script>

<style lang="less" scoped>
.van-cell {
  line-height: 1;
  margin-bottom: 2vw;
  width: 49.667vw;
  float: left;
}
.flex {
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  a {
    color: #333;
  }
  .list {
    width: 41.667vw;
    color: #333;
    font-size: 2.667vw;
    font-weight: 600;
    overflow: hidden;
    img {
      display: block;
      width: 41.667vw;
      height: 41.667vw;
      border-radius: 2.667vw;
    }
    h3 {
      padding: 2.8vw 0 1.067vw 0;
      font-weight: 600;
      width: 35vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 auto;
    }
    span {
      color: orangered;
    }
  }
}
.bottomTip {
  text-align: center;
  margin-top: 3vw;
}
.bottom {
  color: #fff;
  margin-top: 1vw;
}
</style>
